<template>
  <iframe id="map" ref="map" src="static/getpoint/index.html" width="98%" :height="mapHeight"></iframe>
</template>

<script>
import PropTypes from 'ant-design-vue/es/_util/vue-types'

// 省市区级联选择器组件
export default {
  name: 'Getpoint',
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    // v-model 指定选中项
    value: PropTypes.array.def(),
    mapHeight: {
      type: String,
      default: '250px',
    },
  },
  data() {
    return {
      // 选中项
      sValue: [],
      center: [],
    }
  },
  watch: {
    value(val) {
      console.log(val)
      this.sValue = val
    },
  },
  created() {
    window.setCoordinate = this.setCoordinate
  },
  computed: {},
  mounted() {
    this.bus.$on('setlang', function (obj) {
      try {
        var maps = document.querySelector('#map').contentWindow
        maps.getLang(obj)
      } catch {
        setTimeout(() => {
          var maps = document.querySelector('#map').contentWindow
          maps.getLang(obj)
        }, 1000)
      }
    })

    setTimeout(() => {
      try {
        var map = document.querySelector('#map').contentWindow.document.querySelector('#container')
        map.style.height = this.mapHeight
      } catch {}
      var map = document.querySelector('#map').contentWindow.document.querySelector('#container')
      map.style.height = this.mapHeight
    }, 1000)
  },
  methods: {
    setCoordinate(coordinate) {
      this.$emit('setCoordinate', coordinate)
    },
  },
  beforeDestroy() {
    this.bus.$off('setlang')
  },
}
</script>

<style lang="less" scoped>
#map {
  position: relative;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
